<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style type="text/css">
			header,
			footer,
			main {
				display: block;
			}
			
			header {
				position: fixed;
				height: 50px;
				left: 0;
				right: 0;
				top: 0;
			}
			
			footer {
				position: fixed;
				height: 34px;
				left: 0;
				right: 0;
				bottom: 0;
			}
			
			main {
				/* main绝对定位，进行内部滚动 */
				position: absolute;
				top: 50px;
				bottom: 34px;
				/* 使之可以滚动 */
				overflow-y: scroll;
			}
			
			main .content {
				height: 2000px;
			}
		</style>
	</head>

	<body class="layout-scroll-fixed">
		<!-- fixed定位的头部 -->
		<header>

		</header>

		<!-- 可以滚动的区域 -->
		<main>
			<div class="content">
				<!-- 内容在这里... -->
			</div>
		</main>

		<!-- fixed定位的底部 -->
		<footer>
			<input type="text" placeholder="Footer..." unselectable="on" onfocus="this.blur()"/>
			<button class="submit">提交</button>
		</footer>
	</body>

</html>